<!--
 * @文件名称：  Login.vue
 * @包路径：
 * @版权所有： 小树苗 (C) 2020
 *
 * @文件描述:
 * @版本:
 * @作者        zhangshumiao
 * @创建时间    2020/4/11 10:26
 *
 * @修改记录：
  -----------------------------------------------------------------------------------------------
   ----------- 时间      |   修改人    |     修改的方法       |         修改描述   ---------------
  -----------------------------------------------------------------------------------------------
-->
<template>
 <el-row class="login">
   <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="60px" class="loginForm" label-position="left">
     <h2 class="title">小树苗</h2>
     <el-form-item prop="userName">
       <el-input v-model="loginForm.userName"></el-input>
     </el-form-item>
     <el-form-item prop="userPwd">
       <el-input v-model="loginForm.userPwd" type="password"></el-input>
     </el-form-item>
     <el-button type="primary" @click="login">登录</el-button>
   </el-form>
 </el-row>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        userName: '',
        userPwd: '',
      },
      rules: {
        userName: [
          {required: true, message: '账户不能为空', trigger: 'blur'}
        ],
        userPwd: [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 登录
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          if (this.loginForm.userName == 'zsm' && this.loginForm.userPwd == 'zsm') {
            this.$router.push('/home');
          } else {
            console.log(this.loginForm.userName, this.loginForm.userPwd)
            this.$message.error('账户或密码错误!');
          }
        }
      })
    }
  }
}
</script>

<style>
 html{
   background: url("../assets/images/login.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
   top: 0;
   bottom: 0;
   height: 100%;
   width: 100%;
 }
</style>
